let sparr=[
{class:'iconfont icon-muyingchanpin',name:'奶粉',number:100},
{class:'iconfont icon-huazhuangpin',name:'口红',number:90},
{class:'iconfont icon-tubiao-',name:'长裙',number:80},
{class:'iconfont icon-pinleitubiao_nanzhuang',name:'西服',number:70},
{class:'iconfont icon-muyingchanpin',name:'尿不湿',number:60},
{class:'iconfont icon-huazhuangpin',name:'洗面奶',number:50},
{class:'iconfont icon-tubiao-',name:'短裙',number:40},
{class:'iconfont icon-pinleitubiao_nanzhuang',name:'短袖',number:30},
{class:'iconfont icon-muyingchanpin',name:'婴儿车',number:20},
{class:'iconfont icon-huazhuangpin',name:'眼霜',number:10},
]
let sparr1=[
    {class:'iconfont icon-muyingchanpin',name:'奶粉',number:1000},
    {class:'iconfont icon-huazhuangpin',name:'口红',number:900},
    {class:'iconfont icon-tubiao-',name:'长裙',number:800},
    {class:'iconfont icon-pinleitubiao_nanzhuang',name:'西服',number:700},
    {class:'iconfont icon-muyingchanpin',name:'尿不湿',number:600},
    {class:'iconfont icon-huazhuangpin',name:'洗面奶',number:500},
    {class:'iconfont icon-tubiao-',name:'短裙',number:400},
    {class:'iconfont icon-pinleitubiao_nanzhuang',name:'短袖',number:300},
    {class:'iconfont icon-muyingchanpin',name:'婴儿车',number:200},
    {class:'iconfont icon-huazhuangpin',name:'眼霜',number:100},
]
let sousuoarr = []
let sousuoarr1 = []
let today ={jy:'500.00',tq:'200.00',dd:66,xl:88,td:5}
let yesterday = {jy:'400.00',tq:'100.00',dd:56,xl:87,td:50}
let thisweek = {jy:'2000.00',tq:'1000.00',dd:166,xl:188,td:85}
let lastweek = {jy:'3000.00',tq:'2000.00',dd:156,xl:88,td:70}

$(function(){
    //运营数据
    $('#shuju1').click(function(){
        $('#shuju1').css({
            color:'#2199CC'
        }).siblings().css({
            color:'black'
        })
        $('#jtjy').text(today.jy)
        $('#jttq').text(today.tq)
        $('#dd').text(today.dd)
        $('#xl').text(today.xl)
        $('#td').text(today.td)
        $('.day').text('今日')
    

    })
    $('#shuju2').click(function(){
        $('#shuju2').css({
            color:'#2199CC'
        }).siblings().css({
            color:'black'
        })
        $('#jtjy').text(yesterday.jy)
        $('#jttq').text(yesterday.tq)
        $('#dd').text(yesterday.dd)
        $('#xl').text(yesterday.xl)
        $('#td').text(yesterday.td)
        $('.day').text('昨日')

    })
    $('#shuju3').click(function(){
        $('#shuju3').css({
            color:'#2199CC'
        }).siblings().css({
            color:'black'
        })
        $('#jtjy').text(thisweek.jy)
        $('#jttq').text(thisweek.tq)
        $('#dd').text(thisweek.dd)
        $('#xl').text(thisweek.xl)
        $('#td').text(thisweek.td)
        $('.day').text('本周')

    })
    $('#shuju4').click(function(){
        $('#shuju4').css({
            color:'#2199CC'
        }).siblings().css({
            color:'black'
        })
        $('#jtjy').text(lastweek.jy)
        $('#jttq').text(lastweek.tq)
        $('#dd').text(lastweek.dd)
        $('#xl').text(lastweek.xl)
        $('#td').text(lastweek.td)
        $('.day').text('上周')

    })
    sousuo()
    // 查询功能
    $('#chaxun').click(function(){
        sousuo()
    })
    function sousuo(){
        let chaxun = $('#chaxun option:selected').val()
        sousuoarr = [...sparr]
        // 筛选，删掉不符合条件的
        if(chaxun==1){
            for(let i=0;i<sousuoarr.length;i++){
                if(sousuoarr[i].class!='iconfont icon-muyingchanpin'){
                    sousuoarr.splice(i,1)
                    i--
                }
            }
        }
        if(chaxun==2){
            for(let i=0;i<sousuoarr.length;i++){
                if(sousuoarr[i].class!='iconfont icon-pinleitubiao_nanzhuang'){
                    sousuoarr.splice(i,1)
                    i--
                }
            }
        }
        if(chaxun==3){
            for(let i=0;i<sousuoarr.length;i++){
                if(sousuoarr[i].class!='iconfont icon-tubiao-'){
                    sousuoarr.splice(i,1)
                    i--
                }
            }
        }
        if(chaxun==4){
            for(let i=0;i<sousuoarr.length;i++){
                if(sousuoarr[i].class!='iconfont icon-huazhuangpin'){
                    sousuoarr.splice(i,1)
                    i--
                }
            }
        }
        show(sousuoarr)
    }
     // 渲染数组
     function show(data){
        $('#mytable').html('')
        for(let i=0;i<data.length;i++){
            $('#mytable').append(
                `<tr>
                  <td><span class="${data[i].class}"></span></td>
                  <td>${data[i].name}</td>    
                  <td>${data[i].number}</td>  
                </tr>
              `
            )
            
        }
    }
    //第二个表
    sousuo1()
    // 查询功能
    $('#chaxun1').click(function(){
        sousuo1()
    })
    function sousuo1(){
        let chaxun1 = $('#chaxun1 option:selected').val()
        sousuoarr1 = [...sparr1]
        // 筛选，删掉不符合条件的
        if(chaxun1==1){
            for(let i=0;i<sousuoarr1.length;i++){
                if(sousuoarr1[i].class!='iconfont icon-muyingchanpin'){
                    sousuoarr1.splice(i,1)
                    i--
                }
            }
        }
        if(chaxun1==2){
            for(let i=0;i<sousuoarr1.length;i++){
                if(sousuoarr1[i].class!='iconfont icon-pinleitubiao_nanzhuang'){
                    sousuoarr1.splice(i,1)
                    i--
                }
            }
        }
        if(chaxun1==3){
            for(let i=0;i<sousuoarr1.length;i++){
                if(sousuoarr1[i].class!='iconfont icon-tubiao-'){
                    sousuoarr1.splice(i,1)
                    i--
                }
            }
        }
        if(chaxun1==4){
            for(let i=0;i<sousuoarr1.length;i++){
                if(sousuoarr1[i].class!='iconfont icon-huazhuangpin'){
                    sousuoarr1.splice(i,1)
                    i--
                }
            }
        }
        show1(sousuoarr1)
    }
     // 渲染数组
     function show1(data){
        $('#mytable1').html('')
        for(let i=0;i<data.length;i++){
            $('#mytable1').append(
                `<tr>
                  <td><span class="${data[i].class}"></span></td>
                  <td>${data[i].name}</td>    
                  <td>${data[i].number}</td>  
                </tr>
              `
            )
            
        }
    }
    $('#bhr1').click(function(){
        $('#bhr1').css({
            color:'#2199CC'
        }).siblings().css({
            color:'black'
        })
        $('#riqi').text('2019-1-9至2019-1-19')
    })
    $('#bhr2').click(function(){
        $('#bhr2').css('color','#2199CC').siblings().css('color','black')
        $('#riqi').text('2019-1-2至2019-1-9')
    })
    $('#bhr3').click(function(){
        $('#bhr3').css('color','#2199CC').siblings().css('color','black')
        $('#riqi').text('2019-1-1至2019-1-19')
    })
    $('#bhr4').click(function(){
        $('#bhr4').css('color','#2199CC').siblings().css('color','black')
        $('#riqi').text('2019-12-1至2019-12-31')
    })
})
let dangqianye = 0
function goDian(num){
    let imgdiv =document.getElementsByClassName('imgdiv')
    let item = document.getElementsByClassName('item')
    if(dangqianye!=num){
        imgdiv[num].style.animation='leftcomeon 0.5s linear forwards'
        imgdiv[dangqianye].style.animation='leftout 0.5s linear forwards'
        item[dangqianye].style.color='black'
        item[num].style.color='#2199CC'
        dangqianye = num
    }
}
